<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css" />
		<script src="easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>

		<!--<script src="js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/jquery.serializejson.min.js"></script>
	-->
	</head>

	<body>
		<div class="easyui-layout" data-options="fit:true,border:false">
			<div data-options="region:'north'" style="height:50px"></div>
			<div data-options="region:'south',split:true" style="height:50px;"></div>

			<div data-options="region:'west',split:true" title="导航菜单" style="width:200px;">

				<div class="easyui-accordion" data-options="fit:true,border:false">

					<div title="快捷菜单" style="padding:10px;">

						<ul class="easyui-tree wu-side-tree">
							<li iconCls="icon-large-clipart">
								<a href="javascript:void(0)" data-icon="icon-users" data-link="user/user.html" iframe="1">用户管理</a>
							</li>
							<li iconCls="icon-users">
								<a href="javascript:void(0)" data-icon="icon-users" data-link="cate/cate.html" iframe="1">分类管理</a>
							</li>
							<li iconCls="icon-users">
								<a href="javascript:void(0)" data-icon="icon-users" data-link="news/news.html" iframe="1">新闻管理</a>
							</li>
							<li iconCls="icon-users">
								<a href="javascript:void(0)" data-icon="icon-users" data-link="comment/comment.html" iframe="1">评价管理</a>
							</li>
						</ul>

					</div>
				

				</div>
			</div>
			<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

				<div id="wu-tabs" class="easyui-tabs" data-options="fit:true,border:false">

					<div title="首页" data-options="href:'home/home.html',closable:false,iconCls:'icon-tip',cls:'pd3'">

					</div>
				</div>

			</div>

		</div>
	</body>
	<script type="text/javascript">
		function addTab(title, href, iconCls, iframe) {
			var tabPanel = $('#wu-tabs');
			if(!tabPanel.tabs('exists', title)) {
				var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
				if(iframe) {
					tabPanel.tabs('add', {
						title: title,
						content: content,
						iconCls: iconCls,
						fit: true,
						cls: 'pd3',
						closable: true
					});
				} else {
					tabPanel.tabs('add', {
						title: title,
						href: href,
						iconCls: iconCls,
						fit: true,
						cls: 'pd3',
						closable: true
					});
				}
			} else {
				tabPanel.tabs('select', title);
			}
		}
		$(function() {
			$('.wu-side-tree a').bind("click", function() {
				var title = $(this).text();
				var url = $(this).attr('data-link');
				var iconCls = $(this).attr('data-icon');
				var iframe = $(this).attr('iframe') == 1 ? true : false;
				addTab(title, url, iconCls, iframe);
			});
		});
	</script>

</html>